// 初始化统计数据状态
let statisticsData = {
  viewerCount: 432378, // 观看人数
  liveCount: 709, // 实时人数
  totalAmount: 2105315, // 总成交金额
  totalQty: 24215, // 总成交件数
  newFans: 12762, // 新增粉丝
};
// 显示相关的状态
let currentStartIndex = 0; // 当前显示数据的起始索引
const DISPLAY_COUNT = 10; // 显示数据条数
let displayData = []; // 当前显示的数据

// 页面加载完成后开始
$(document).ready(function () {
  // 使用全局的liveData数组
  const data = liveData;

  // 初始化显示数据
  initializeDisplayData(data);

  // 初始化统计数据
  // initializeStatistics(data);

  // 初始渲染
  renderRankList(displayData);
  renderStatistics(data);

  // 启动定时更新
  startDataUpdate(data);
});

// 初始化显示数据
function initializeDisplayData(data) {
  displayData = data.slice(
    currentStartIndex,
    currentStartIndex + DISPLAY_COUNT
  );
}

// 初始化统计数据
function initializeStatistics(data) {
  statisticsData.totalAmount = data.reduce((sum, item) => sum + item.amount, 0);
  statisticsData.totalQty = data.reduce((sum, item) => sum + item.qty, 0);
}

// 渲染商品排行列表
function renderRankList(data) {
  const container = $(".rank-list");

  // 保留表头，清空数据行
  container.find(".rank-item").remove();

  data.forEach((item) => {
    const rankItem = `
      <div class="rank-item">
        <div class="rank-item-td">${item.name}</div>
        <div class="rank-item-td">¥${item.amount.toFixed(2)}</div>
        <div class="rank-item-td">${item.qty}</div>
        <div class="rank-item-td">${item.rate}</div>
      </div>
    `;
    container.append(rankItem);
  });
}

// 更新当前显示的数据（不滚动，直接刷新）
function updateDisplayData(data) {
  // 重新构建当前显示数据
  displayData = [];
  for (let i = 0; i < DISPLAY_COUNT; i++) {
    const index = (currentStartIndex + i) % data.length;
    displayData.push(data[index]);
  }

  // 重新渲染
  renderRankList(displayData);
}

// 滚动显示数据
function scrollDisplayData(data) {
  const container = $(".rank-list");
  const firstItem = container.find(".rank-item").first();

  // 第一条数据添加淡出动画
  firstItem.addClass("slide-out-up");

  setTimeout(() => {
    // 更新显示数据索引
    currentStartIndex = (currentStartIndex + 1) % data.length;

    // 重新构建显示数据
    displayData = [];
    for (let i = 0; i < DISPLAY_COUNT; i++) {
      const index = (currentStartIndex + i) % data.length;
      displayData.push(data[index]);
    }

    // 移除第一条数据
    firstItem.remove();

    // 添加新的最后一条数据
    const newItem = displayData[DISPLAY_COUNT - 1];
    const newRankItem = $(`
      <div class="rank-item slide-in-down">
        <div class="rank-item-td">${newItem.name}</div>
        <div class="rank-item-td">¥${newItem.amount.toFixed(2)}</div>
        <div class="rank-item-td">${newItem.qty}</div>
        <div class="rank-item-td">${newItem.rate}</div>
      </div>
    `);

    container.append(newRankItem);

    // 触发淡入动画
    setTimeout(() => {
      newRankItem.removeClass("slide-in-down").addClass("slide-in-complete");
    }, 50);
  }, 300); // 等待淡出动画完成的一半时间
}

// 渲染统计数据
function renderStatistics(data) {
  // 更新页面显示
  $(".transaction-item-value").text(
    `¥${statisticsData.totalAmount.toLocaleString()}`
  );
  $(".other-data-item")
    .eq(0)
    .find(".other-data-item-value")
    .text(statisticsData.viewerCount); // 观看人数
  $(".other-data-item")
    .eq(1)
    .find(".other-data-item-value")
    .text(statisticsData.liveCount); // 实时人数
  $(".other-data-item")
    .eq(2)
    .find(".other-data-item-value")
    .text(statisticsData.totalQty); // 成交件数
  $(".other-data-item")
    .eq(3)
    .find(".other-data-item-value")
    .text(statisticsData.newFans); // 新增粉丝
}

// 启动数据更新定时器
function startDataUpdate(data) {
  // 数据更新定时器（每2秒）
  setInterval(() => {
    // 先更新原数据（优先从当前显示的数据中选择）
    updateRandomData(data);
    updateStatisticsData();

    // 更新当前显示的数据
    updateDisplayData(data);

    // 更新统计数据显示
    renderStatistics(data);
  }, 2000);

  // 滚动定时器（每5秒）
  setInterval(() => {
    scrollDisplayData(data);
  }, 5000);
}

// 更新统计数据
function updateStatisticsData() {
  // 观看人数增加10-20个（继续累加）
  const viewerIncrease = Math.floor(Math.random() * 11) + 10; // 10-20
  statisticsData.viewerCount += viewerIncrease;

  // 实时人数改为累加-5到5之间的随机数
  const liveCountChange = Math.floor(Math.random() * 11) - 5; // -5到5
  statisticsData.liveCount += liveCountChange;

  // 成交件数随机增加3-5个
  const qtyIncrease = Math.floor(Math.random() * 3) + 3; // 3-5
  statisticsData.totalQty += qtyIncrease;

  // 新增粉丝随机增加3-5个
  const fansIncrease = Math.floor(Math.random() * 3) + 3; // 3-5
  statisticsData.newFans += fansIncrease;

  // 总金额增加100-200
  const totalAmountIncrease = Math.floor(Math.random() * 101) + 100; // 100-200
  statisticsData.totalAmount += totalAmountIncrease;

  console.log(
    `统计数据更新: 观看人数+${viewerIncrease}, 实时人数${liveCountChange >= 0 ? '+' : ''}${liveCountChange}, 成交件数+${qtyIncrease}, 新增粉丝+${fansIncrease}, 总金额+¥${totalAmountIncrease}`
  );
}

// 随机更新两条数据（优先更新当前显示的数据）
function updateRandomData(data) {
  // 70%概率从当前显示的数据中选择，30%概率从全部数据中选择
  const useDisplayData = Math.random() < 0.7;

  let randomIndices;
  if (useDisplayData && displayData.length >= 2) {
    // 从当前显示的数据中选择两个索引
    const displayIndices = getRandomIndices(DISPLAY_COUNT, 2);
    // 转换为原数据中的索引
    randomIndices = displayIndices.map(
      (i) => (currentStartIndex + i) % data.length
    );
  } else {
    // 从全部数据中随机选择
    randomIndices = getRandomIndices(data.length, 2);
  }

  // 成交金额增加的选项
  const amountIncrements = [99, 198, 297, 396];

  // 成交订单增加的选项
  const qtyIncrements = [1, 2, 3, 4];

  randomIndices.forEach((index) => {
    const item = data[index];

    // 随机增加成交金额
    const amountIncrement =
      amountIncrements[Math.floor(Math.random() * amountIncrements.length)];
    item.amount += amountIncrement;

    // 随机增加成交订单
    const qtyIncrement =
      qtyIncrements[Math.floor(Math.random() * qtyIncrements.length)];
    item.qty += qtyIncrement;

    // 增加点击-成交率 0.01%
    const currentRate = parseFloat(item.rate.replace("%", ""));
    const newRate = (currentRate + 0.01).toFixed(2);
    item.rate = `${newRate}%`;

    console.log(
      `更新商品: ${item.name} - 成交金额增加: ¥${amountIncrement}, 订单增加: ${qtyIncrement}, 新成交率: ${item.rate}`
    );
  });
}

// 获取随机不重复的索引数组
function getRandomIndices(max, count) {
  const indices = [];
  while (indices.length < count) {
    const randomIndex = Math.floor(Math.random() * max);
    if (!indices.includes(randomIndex)) {
      indices.push(randomIndex);
    }
  }
  return indices;
}
